﻿import QtQuick 2.14

import QtQuick.Window 2.12
import QtQuick.Controls 1.4
import QtQuick.Controls 2.14
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls.impl 2.14
import QtGraphicalEffects 1.14


import QtQuick.Window 2.12
import QtQuick.Controls.Styles 1.4


Item {

    id: root
    property string title: ""
    property int editWidth: 240*dp
    property int titleWidth: title === "" ? 0: 80*dp
    property var titleHAlign: Text.AlignLeft
    property var titleVAlign: Text.AlignVCenter
    property bool titleAlignJustify: true           // 标题是否两端对齐（设置为true时会覆盖titleHAline属性！！！）

    property int popupHeight: 240*dp

    property var date: new Date()         // 我也不知道为啥月份从0开始，日从1开始算……
    property var dateItem
    property string dateStr: calendar.selectedDate.toLocaleString(Qt.locale("de_DE"), "yyyy-MM-dd")
    property bool enabled: true


    width: editWidth
    height: 40*dp

    function getDate(){
        return dateItem
    }function getText(){
        return dateStr
    }

    Item{
        height: parent.height
        width: titleWidth - 16*dp
        Text{
            text: {
                if(!titleAlignJustify) return title
                else{

                    if(text_rawTitle.contentWidth === 0 || text_space.contentWidth === 0){
                        return   title
                    }

                    return funcTools.justifyAlignAppendSpace(title, parent.width, text_rawTitle.width, text_space.width)
                }
            }
            font.pixelSize: config.fontsize
            x: 0
            anchors.fill: parent
            verticalAlignment: titleVAlign
            horizontalAlignment: titleAlignJustify ? Text.AlignHCenter : titleHAlign
        }
        Text{           // 用来计算空格的长度
            id: text_space
            text: " "
            font.pixelSize: config.fontsize
            visible: false
        }
        Text{           // 用来计算纯文本的长度
            id: text_rawTitle
            text: title
            font.pixelSize: config.fontsize
            visible: false
        }

    }
    ComboBox{
        id: control
        height: parent.height
        width: editWidth
        x: titleWidth

        contentItem: Text{
            text: dateStr
            font.pixelSize: config.fontsize
            verticalAlignment: Text.AlignVCenter
            leftPadding: 10*dp
        }

        background: Rectangle{
            anchors.fill: parent
            border.color: (this.isHovered || control.popup.visible) ? config.themeColor : "#CCCCCC"
            radius: 3*dp
            property bool isHovered: false
            MouseArea{      // Hover样式
                anchors.fill: parent
                propagateComposedEvents: true
                hoverEnabled: config.hoverEnabled
                cursorShape: Qt.PointingHandCursor
                onEntered: {
                    parent.isHovered = true && config.hoverEnabled
                }onExited: {
                    parent.isHovered = false
                }onPressed:{
                    mouse.accepted = false
                }onReleased:{
                    mouse.accepted = false
                }
            }
            // 阴影
            layer.enabled: control.popup.visible && config.device!==2
            layer.effect: DropShadow {
                radius: 12*dp
                samples: 43
                transparentBorder: true
                color: "#4D1677FA"
            }
            Image {
                x: parent.width-35*dp; y: 5*dp
                height: root.height-10*dp; width: root.height-10*dp
                source: "qrc:/picture/calendar.png"
            }
        }
        indicator: Item{

        }


        popup: Popup{
            id: popup
            width: control.width
            height: popupHeight
            y: control.height + 2*dp
            padding: 5*dp
            contentItem: Rectangle{
                radius: 3*dp
                height: popupHeight;  width: control.width
                clip: true

                Calendar{
                    id: calendar
                    anchors.fill: parent
                    selectedDate: date
                    onClicked: {
                        dateStr = selectedDate.toLocaleString(Qt.locale("de_DE"), "yyyy-MM-dd")
                        dateItem = selectedDate
                    }

                    Rectangle{      // (把那个不知道从哪冒出来的Border盖上了...
                        anchors.centerIn: parent
                        width: parent.width + 5*dp;  height: parent.height + 5*dp
                        border.color: "white"
                        color: "transparent"
                        border.width: 5*dp
                        z: 1
                    }

                    style: CalendarStyle{

                        gridVisible: false

                        // 标题栏
                        navigationBar:Rectangle {
                            height: 20*dp
                            width: editWidth
                            //去事件穿透
                            MouseArea{
                                anchors.fill: parent;
                                onPressed:{
                                    mouse.accepted = true
                                }
                            }
                            Text{                       // 标题
                                id:dateText;
                                anchors.centerIn: parent;
                                color: "#333333";
                                font.pixelSize: config.fontsize
                                text: calendar.visibleYear+"年"+fillZero(calendar.visibleMonth+1)+"月"
                            }
                            CustomButtonIcon{           // 上一个月
                                width: 18*dp; height: 18*dp
                                anchors.verticalCenter: parent.verticalCenter
                                x: 27*dp
                                button_icon: "qrc:/picture/leftarrow.png"
                                onClicked: {
                                    calendar.showPreviousMonth();
                                }
                            }
                            CustomButtonIcon{           // 下一个月
                                width: 18*dp; height: 18*dp
                                anchors.verticalCenter: parent.verticalCenter
                                x: parent.width-27*dp-width
                                button_icon: "qrc:/picture/rightarrow.png"
                                onClicked: {
                                    calendar.showNextMonth();
                                }
                            }
                            CustomButtonIcon{           // 上一年
                                width: 18*dp; height: 18*dp
                                anchors.verticalCenter: parent.verticalCenter
                                x: 5*dp
                                button_icon: "qrc:/picture/leftarrow_d.png"
                                onClicked: {
                                    calendar.showPreviousYear();
                                }
                            }
                            CustomButtonIcon{           // 下一年
                                width: 18*dp; height: 18*dp
                                anchors.verticalCenter: parent.verticalCenter
                                x: parent.width-5*dp-width
                                button_icon: "qrc:/picture/rightarrow_d.png"
                                onClicked: {
                                    calendar.showNextYear();
                                }
                            }
                            // 补零
                            function fillZero(value) {
                                return value.toString().length < 2 ? ('0' + value) : value
                            }

                        }
                        // 日期
                        dayDelegate: Item {
                            id:dayDelegate
                            Rectangle {
                                anchors.centerIn: parent
                                height: 20*dp; width: 20*dp
                                color: styleData.selected ? config.themeColor : "transparent"
                            }

                            Label {
                                id: dayDelegateText
                                text: styleData.date.getDate()
                                anchors.centerIn: parent
                                font.pixelSize: config.fontsize
                                color: {
                                    var color = "#DDDDDD"
                                    if (styleData.valid) {
                                        color = styleData.visibleMonth ?  "#333333" : "#D4D4D4"
                                        if (styleData.selected) {
                                            color = "white"
                                        }
                                    }
                                    color
                                }
                            }
                        }
                    }

                }
            }

            // popup的背景
            background: Rectangle {
                clip: true
                radius: 3*dp
                border.color: "#CCCCCC"
                layer.enabled: true  // 设置layer为enable
                // 阴影
                layer.effect: DropShadow {
                    radius: 21*dp
                    samples: 43
                    transparentBorder: true
                    color: "#4D002062"
                }
            }
            // 过渡效果
            enter: Transition {
                NumberAnimation {
                    property: "height"
                    from: 0
                    to: popupHeight
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
            exit: Transition {
                NumberAnimation {
                    property: "height"
                    from: popupHeight
                    to: 0
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
        }
    }


    Rectangle{
        anchors.fill: control
        visible: !root.enabled
        radius: 3*dp
        color: "#EEEEEE"
        opacity: 0.5
        MouseArea{
            anchors.fill: parent
            onClicked: {
            }
        }
    }

}
